<!-- 2025.6.11-算机2201李俊杰 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>体检预约</title>
		<!-- 导入vue框架 -->
		<script src="js/v3.2.8/vue.global.prod.js"></script>
		<!-- 导入ElementPlus框架 -->
		<script src="js/element-plus.js"></script>
		<!-- 导入Elementplus Icon  -->
		<script src="js/element-icons.js"></script>
		<!-- 导入Elementplus Css样式 -->
		<link rel="stylesheet" href="css/element-plus.css">
		<!-- 引入主页面样式 -->
		<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
		<div id="app">
			<!-- 面包屑 -->
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>预约</el-breadcrumb-item>
				<el-breadcrumb-item>体检预约</el-breadcrumb-item>
			</el-breadcrumb>
			<!-- 两个按钮 -->
			<div style="margin-top: 20px; margin-bottom: 20px">
				<el-button type="primary" round>预约</el-button>
				<el-button type="primary" round>清空</el-button>
			</div>
			<!-- 基本信息 -->
			<div>
				<el-descriptions class="margin-top" title="基本信息" :column="3" :size="size" border>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon :style="iconStyle">
									<Tickets />
								</el-icon>
								体检单号
							</div>
						</template>
						<el-input v-model="input" placeholder="20231008990202120" disabled />
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon :style="iconStyle">
									<user />
								</el-icon>
								姓名
							</div>
						</template>
						<el-input v-model="name" placeholder="输入姓名" />
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon :style="iconStyle">
									<Female />
								</el-icon>
								性别
							</div>
						</template>
						<el-select v-model="options.value" class="m-2" placeholder="选择性别">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon :style="iconStyle">
									<Phone />
								</el-icon>
								手机号
							</div>
						</template>
						<el-input v-model="phone" placeholder="输入手机号" />
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon :style="iconStyle">
									<Calendar />
								</el-icon>
								出生日期
							</div>
						</template>
						<el-date-picker v-model="birthday" type="date" placeholder="Pick a day" :size="size" />
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon :style="iconStyle">
									<Postcard />
								</el-icon>
								身份证号
							</div>
						</template>
						<el-input v-model="cardNumber" placeholder="输入身份证号码" />
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon :style="iconStyle">
									<location />
								</el-icon>
								家庭住址
							</div>
						</template>
						<el-input v-model="address" placeholder="输入通讯地址" />
					</el-descriptions-item>
				</el-descriptions>
			</div>
			<!-- 预约信息 -->
			<div style="margin-top: 20px;">
				<el-descriptions class="margin-top" title="预约信息" :column="1" :size="size" border>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon :style="iconStyle">
									<location />
								</el-icon>
								预约院区
							</div>
						</template>
						<el-select v-model="yuanqu.value" class="m-2" placeholder="选择院区地址">
							<el-option v-for="item in yuanqu" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								<el-icon :style="iconStyle">
									<Document />
								</el-icon>
								院区描述
							</div>
						</template>
						营业时间： 周一至周六 7:30-11:30 <br>
						采血截止：10:30<br>
						联系电话：4006297568<br>
						地址：沈阳市浑南区创新路175号（智慧大街交互处）
					</el-descriptions-item>
				</el-descriptions>
				<!-- 预约详情 -->
				<div style="margin-top: 20px;">
					<el-descriptions class="margin-top" title="预约详情" :column="3" :size="size" border>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									<el-icon :style="iconStyle">
										<Notification />
									</el-icon>
									预约类型
								</div>
							</template>
							<el-select v-model="yuyuetype.value" class="m-2" placeholder="预约类型">
								<el-option v-for="item in yuyuetype" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									<el-icon :style="iconStyle">
										<Notification />
									</el-icon>
									预约套餐
								</div>
							</template>
							<el-select v-model="yuyuetaocao.value" class="m-2" placeholder="预约套餐">
								<el-option v-for="item in yuyuetaocao" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									<el-icon :style="iconStyle">
										<Star />
									</el-icon>
									体检时间
								</div>
							</template>
							<el-date-picker v-model="yuyuedate" type="date" placeholder="Pick a day" :size="size" />
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									<el-icon :style="iconStyle">
										<Star />
									</el-icon>
									体检时段
								</div>
							</template>
							<el-select v-model="tijianshiduan.value" class="m-2" placeholder="体检时段">
								<el-option v-for="item in tijianshiduan" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									<el-icon :style="iconStyle">
										<user />
									</el-icon>
									套餐价格
								</div>
							</template>
							<el-input v-model="input" placeholder="1500" disabled />
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									<el-icon :style="iconStyle">
										<user />
									</el-icon>
									优惠补贴
								</div>
							</template>
							<el-input v-model="input" placeholder="400" disabled />
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									<el-icon :style="iconStyle">
										<user />
									</el-icon>
									结算金额
								</div>
							</template>
							<el-input v-model="input" placeholder="1100" disabled />
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									<el-icon :style="iconStyle">
										<user />
									</el-icon>
									结算类别
								</div>
							</template>
							<el-select v-model="jiesuanliebie.value" class="m-2" placeholder="结算类别">
								<el-option v-for="item in jiesuanliebie" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-descriptions-item>
					</el-descriptions>
				</div>
				<!-- 套餐详情 -->
				<div style="margin-top: 20px;">
					<el-descriptions title="套餐详情" direction="vertical" :column="4" :size="size" border>
						<!-- 第一行-->
						<el-descriptions-item label="检查项目">肺部CT</el-descriptions-item>
						<el-descriptions-item label="检查内容">CT检查【肺部-平扫】</el-descriptions-item>
						<el-descriptions-item label="检查意义" :span="2">
							用于检查肺部有无良性恶性肿瘤，结核，炎症和间质性，弥漫性病变等。
						</el-descriptions-item>

						<!-- 第二行-->
						<el-descriptions-item label="检查项目">头部CT</el-descriptions-item>
						<el-descriptions-item label="检查内容">头颅骨CT</el-descriptions-item>
						<el-descriptions-item label="检查意义" :span="2">
							CT检查头部影像
						</el-descriptions-item>

						<!-- 第三行-->
						<el-descriptions-item label="检查项目" :span="1">肿瘤两项</el-descriptions-item>
						<el-descriptions-item label="检查内容" :span="1">癌胚抗原测定（定量）,甲胎蛋白测定</el-descriptions-item>
				  <el-descriptions-item label="检查意义" :span="2">
							癌胚抗原：系广谱性肿瘤标志物，对大肠癌、胰腺癌的筛查、疗效观察和预后评估有重要的临床意义。<br>
							在胃、乳腺、肺癌等也可升高。 甲胎蛋白：对原发性肝癌的诊断、疗效观察和预后评估有重要的临床意义。<br>
							在卵巢、胃、胰腺癌、睾丸癌等肿瘤及肝炎、肝硬化等疾病也有异常发现。孕期可出现升高。
						</el-descriptions-item>

						<!-- 第四行-->
						<el-descriptions-item label="检查项目" :span="1">C13呼气试验</el-descriptions-item>
						<el-descriptions-item label="检查内容" :span="1">C13呼气试验</el-descriptions-item>
						<el-descriptions-item label="检查意义" :span="2">
							空腹 ，一个月以内使用过抗生素和胃药者不宜做此检查。<br>
							13碳-尿素呼气试验阳性示有幽门螺杆菌感染，它与胃部炎症、消化性溃疡、胃癌的发生密切关联。
						</el-descriptions-item>
						
						<!-- 第五行-->
						<el-descriptions-item label="检查项目" :span="1">甲功三项</el-descriptions-item>
						<el-descriptions-item label="检查内容" :span="1">血清游离甲状腺素测定</el-descriptions-item>
						<el-descriptions-item label="检查意义" :span="2">
							判断甲状腺功能，鉴别免疫性疾病
						</el-descriptions-item>
						
						<!-- 第六行-->
						<el-descriptions-item label="检查项目" :span="1">颈动脉彩超</el-descriptions-item>
						<el-descriptions-item label="检查内容" :span="1">彩色多普勒超声检查【颈动脉】</el-descriptions-item>
						<el-descriptions-item label="检查意义" :span="2">
							通过彩色超声仪器采用无创性检查方法，检测颈动脉结构和动脉粥样硬化斑形态、范围、性质、动脉狭窄程度等；<br>
							早期发现动脉血管病变，为有效预防和减少冠心病、缺血性脑血管病等心脑血管疾病发病提供客观的血流动力学依据。
						</el-descriptions-item>
					</el-descriptions>
				</div>
			</div>
	</body>
	<script>
		const App = {
			data() {
				return {
					name: '', //姓名
					//性别
					options: [{
							value: 'boy',
							label: '男士',
						},
						{
							value: 'women',
							label: '已婚女士',
						},
						{
							value: 'girl',
							label: '未婚女士',
						}
					],
					//手机号
					phone: '',
					birthday: '',
					cardNumber: '',
					address: '',

					//预约信息
					//预约院区
					yuanqu: [{
							value: 'hunnan',
							label: '沈阳熙康云医院-浑南院区'
						},
						{
							value: 'sanhao',
							label: '沈阳熙康云医院-三好街院区'
						},
						{
							value: 'shijidasha',
							label: '沈阳熙康云医院-世纪大厦'
						},
					],
					//预约类型
					yuyuetype: [{
							value: 'tuantiyuyue',
							label: '团体预约'
						},
						{
							value: 'tijianyuyue',
							label: '个检预约'
						}
					],
					//预约套餐
					yuyuetaocao: [{
							value: 'taocanA',
							label: '23东软家属已婚女士套餐A'
						},
						{
							value: 'taocanB',
							label: '23东软家属已婚女士套餐B'
						},
						{
							value: 'taocanC',
							label: '23东软家属已婚女士套餐C'
						},
						{
							value: 'taocanD',
							label: '23东软家属已婚女士套餐D'
						}
					],
					yuyuedate: '', //预约时间
					jiesuanliebie: [{
							value: 'zhifubao',
							label: '支付宝'
						},
						{
							value: 'wechat',
							label: '微信'
						},
						{
							value: 'yibao',
							label: '医保'
						},
						{
							value: 'xianjian',
							label: '现金'
						},
						{
							value: 'yinhangka',
							label: '银行卡'
						}
					],
					tijianshiduan: [{
							value: 'am',
							label: '上午'
						},
						{
							value: 'pm',
							label: '下午'
						}
					]
				}
			},
			methods: {}
		};
		const app = Vue.createApp(App);
		app.use(ElementPlus);
		app.component("User", ElementPlusIconsVue.User);
		app.component("Female", ElementPlusIconsVue.Female);
		app.component("Phone", ElementPlusIconsVue.Phone);
		app.component("Postcard", ElementPlusIconsVue.Postcard);
		app.component("Calendar", ElementPlusIconsVue.Calendar);
		app.component("Document", ElementPlusIconsVue.Document);
		app.component("tickets", ElementPlusIconsVue.Tickets);
		app.component("location", ElementPlusIconsVue.Location);
		app.component("Notification", ElementPlusIconsVue.Notification);
		app.component("Star", ElementPlusIconsVue.Star);
		app.mount("#app");
	</script>
</html>
